//para1:星星数目 ；默认值是5
//para2:星星的大小；默认值是30
function Stars(num,size){
	this.num = num || 5 
	this.size = size  || 30
	//找到存放星星的容器
	this.box = document.querySelector('.stars-box')
	
	//调用show方法展示星星
	this.show()
}

Stars.prototype.show = function(){
	for(var i = 0 ;i < this.num ;i ++){
		var star = document.createElement('img')
		star.style.width = this.size + 'px'
		star.style.height = this.size + 'px'
		//记录星星
		star.classList.add('star')
		//记录星星的编号
		star.dataset.index = i 
		star.src = 'img/star-yellow.png'
		this.box.appendChild(star)
		star.onclick = this.click 
	}
	var scoreSpan = document.createElement('span')
	scoreSpan.classList.add('score')
	scoreSpan.style.display = 'inline-block'
	scoreSpan.style.verticalAlign = 'top'
	scoreSpan.style.fontSize = '30px'
	scoreSpan.style.lineHeight = this.box.clientHeight + 'px'
	this.box.appendChild(scoreSpan)
}

Stars.prototype.click = function(event){
	//找到所有的星星；
	var imgs = document.querySelectorAll('.star')
	for (var i = 0; i < imgs.length; i++) {
		if (i <= this.dataset.index) {
			//这个星星以及它前面的星星变为红星星;
			imgs[i].src = 'img/star-red.png'
		} else {
			//后面的变为黄星星;
			imgs[i].src = 'img/star-yellow.png'
		}
	}
	var span = document.querySelector('.score')
	span.innerHTML = parseInt(this.dataset.index) + 1 + '分'
}
//编程规范：
//每个方法，都实现一个小功能，尽量代码一屏幕可以显示完整；
//避免方法过长，逻辑复杂，不便理解。
//增强代码的可读性。










